<template>
    <div class="watermark">
        <canvas canvas-id='watermark' style='width:750upx;height:100vh;'></canvas>
    </div>
</template>

<script>
//uni.upx2px
    import {mapState} from 'vuex';
	import {getNowFormatDate} from '@/utils/index'
    export default {
        props:{
            meta:{
                type:Object,
                default:function(){
                    return {
                        label1:'',
                        label2:''
                    }
                }
            }
        },
		mounted(){
			this.date = getNowFormatDate('/');
			this.watermark();
		},
        data(){
           return {
			    date:'',
                width:uni.upx2px(750),
                item:{
                    widthSize:2,
                    heightSize:7,
                    fontSize:uni.upx2px(48),
                    fontStyle:'bold #000000'
                }
           }
        },
        computed:{
            ...mapState({
                windowHeight:state=>state.settings.systemInfo.windowHeight,
            }),
            label2Show(){
                const label = this.meta.label2;
                return label;
            }
        },

        methods:{
            watermark(){
                const {label1} = this.meta;
                const label2 = this.label2Show;
                const {width,windowHeight} = this;
                const {widthSize,heightSize,fontSize,fontStyle} = this.item;
                const widthVal = width/widthSize
                const heightVal = windowHeight/heightSize
                var ctx = uni.createCanvasContext("watermark",this);
                ctx.setFontSize(fontSize);
                //ctx.font = fontStyle
                ctx.translate(-500, -50);
                ctx.rotate(-15 * Math.PI/180)
                for (let j = 1; j < heightSize * 2; j++) { //这个for循环代表纵向循环
                    this.drawTextForSign(ctx,{label1,label2},{x:0,y:heightVal*j},{widthVal,heightVal})
                    for (let i = 1; i < widthSize * 2; i++) {//这个for循环代表横向循环，
                        this.drawTextForSign(ctx,{label1,label2},{x:widthVal * i,y:heightVal*j},{widthVal,heightVal,fontSize})
                    }
                }
                ctx.draw();
            },

            drawTextForSign(context,{label1,label2},{x,y},{widthVal,heightVal,fontSize}){

                var gradient = context.createLinearGradient(x, 0, x + widthVal, 0);
                gradient.addColorStop("0", "red");
                gradient.addColorStop("0.5", "green");
                gradient.addColorStop("1.0", "blue");
                // 用渐变填色
                // ctx.fillStyle = gradient;
                // ctx.fillText(text, 10, 90);
                // ctx.restore();
                context.setFillStyle(gradient);

                let {width:processtextLength1} = context.measureText(label1);
                let {width:processtextLength2} = context.measureText(label2);
				let {width:processtextLength3} = context.measureText(this.date);
                const countTextCenter1 = x + (widthVal - processtextLength1) / 2;
                const countTextCenter2 = x + (widthVal - processtextLength2) / 2;
				const countTextCenter3 = x + (widthVal - processtextLength3) / 2;

                context.fillText(label1, countTextCenter1, y+fontSize);
                context.fillText(label2, countTextCenter2, y+fontSize*2);
				context.fillText(this.date, countTextCenter3, y+fontSize * 3);




                // context.fillText(label1, 150, 60);
                // context.fillText(label2, 150,60);
                //context.draw();
            },
        },
    }
</script>

<style>
    .watermark{
        position: fixed;
        z-index: 999;
        opacity: 0.1;
        top: 0px;
        pointer-events: none;
    }
</style>
